<template>
    <div class="box">
        <div class="top">
            <el-form ref="form" :model="form" label-width="80px" class="from_style">

                <div>
                    <span>姓名：</span>
                    <input type="text" v-model="input1" placeholder="请输入内容">
                </div>
                <div>
                    <span>学号：</span>
                    <input type="text" v-model="input2" placeholder="请输入内容">
                </div>
                <div>
                    <span>手机号：</span>
                    <input type="text" v-model="input3" placeholder="请输入内容">
                </div>
                <div>
                    <span>状态：</span>
                    <input type="text" v-model="input4" placeholder="请输入内容">
                </div>
                <div>
                    <span>学校：</span>
                    <input type="text" v-model="input5" placeholder="请输入内容">
                </div>
                <div>
                    <span>学院：</span>
                    <input type="text" v-model="input6" placeholder="请输入内容">
                </div>
                <div>
                    <span>年级：</span>
                    <input type="text" v-model="input6" placeholder="请输入内容">
                </div>
                <div>
                    <span> 班级：</span>
                    <input type="text" v-model="input6" placeholder="请输入内容">
                </div>
            </el-form>
        </div>
        <div class="button">
            <el-table :data="tableData" border style="border-radius: 10px;" show-overflow-tooltip>
                <el-table-column fixed prop="name" label="姓名" >
                </el-table-column>
                <el-table-column prop="id" label="学号" >
                </el-table-column>
                <el-table-column prop="province" label="手机号" >
                </el-table-column>
                <el-table-column prop="type" label="状态" >
                </el-table-column>
                <el-table-column prop="address" label="学校">
                </el-table-column>
                <el-table-column prop="zip" label="学院">
                </el-table-column>
                <el-table-column prop="zip" label="年级" >
                </el-table-column>
                <el-table-column prop="zip" label="班级" >
                </el-table-column>
                <el-table-column fixed="right" label="操作" >
                    <el-switch
                        v-model="value"
                        active-color="#0077ff"
                        inactive-color="#f1f1f1"
                        @click="activation">
                    </el-switch>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            value:true,
            input1: '',
            input2: '',
            input3: '',
            input4: '',
            input5: '',
            input6: '',
            form: {
            },
            tableData: [{
                name: 'xxx',
                id:'20240101',
                province: '18183162940',
                type:'false',
                city: '普陀区',
                address: '重庆城市职业学院',
                zip: '科大讯飞大数据学院',
                grade:'2022级',
                class:'移动互联0033班'
            }]
        }
    },
    methods: {
        activation() {
            alert('激活')
        }
    }

}
</script>

<style scoped lang="less">
.box {
    height: 100%;
    background-color: #fff;
}

.top {
    padding: 10px;
    height: 20%;
}

.button {
    padding: 10px;
    height: 80%;
}

// .from_style {
//     // display: flex;
// }

.from_style div {
    display: inline-block;
    width: 25%;
    margin-bottom:10px ;

}

.from_style div span {
    display: inline-block;
    width: 65px;
}

.from_style div input {
    padding: 5px;
    border-radius: 4px;
    background-color: #d1d1d161;
    border: 0px solid #000;
    outline: none;
}
</style>
